<template>
	<div>
		<commons-alert @alert-dismissed="alertDismissed" :variant="alert.variant" :dismissCountDown="alert.dismissCountDown">{{alert.message}}</commons-alert>
		<my-table ref="tableObj" :fields="fields" :oprable="oprable" :selectable="selectable"
		 :showSelectBtn="showSelectBtn" :items="items" :customCells="customCells" :oprs="oprs" @item-new="itemNew"
		 @item-selected="itemSelected">
			<template v-slot:after-tools-before-table>
				<div v-show="newItem.showable" class="m-1 clearfix border border-secondary p-1">
					<b-icon @click="closeNewItemWidget" icon="x" class="float-right"></b-icon>
					<div>父级节点为<b>{{newItem.parentName ? newItem.parentName : 'Root'}}</b></div>
					<b-input v-model="newItem.name" placeholder="请输入目录名称"></b-input>
					<b-button class="float-right" size="sm" @click="fastSaveCatalog">保存</b-button>
				</div>
			</template>
			<template v-slot:custom-cells-cell(name)="{data}">
				<span :style="{paddingLeft: ((data.item.lv) * 2) + 'rem'}">{{data.item.name}}</span>
			</template>
		</my-table>
	</div>
</template>

<script>
	import MyTable from '../../commons/Table.vue'
	import CommonsAlert from '../../commons/Alert.vue'
	import axios from 'axios'
	import gl from '../../commons/global_variable.js'

	export default {
		name: "simple-catalogs",
		components: {
			MyTable,
			CommonsAlert
		},
		data: function() {
			return {
				fields: [{
					key: "name",
					label: "名称"
				}],
				selectable: true,
				showSelectBtn: false,
				oprable: false,
				oprs: {
					new: true,
					update: false,
					mdel: false,
					view: false,
					del: false
				},
				newItem: {
					showable: false,
					name: '',
					parentId: '',
					parentName: ''
				},
				alert: {
					message: '',
					variant: 'warning',
					dismissCountDown: 0
				},
				items: [],
				customCells: [
					"cell(name)"
				]
			}
		},
		created: function() {
			this.getItems()
		},
		methods: {
			selectCatalogs: function(catalogIds){
				this.$refs.tableObj.setSelectRows(catalogIds)
			},
			closeNewItemWidget: function() {
				this.newItem.parentId = ''
				this.newItem.parentName = ''
				this.newItem.name = ''
				this.newItem.showable = false
			},
			fastSaveCatalog: function() {
				var that = this
				axios.post(gl.cms_args.server_url + 'catalog/sou', {
					name: this.newItem.name,
					parentId: this.newItem.parentId
				}).then(function(response) {
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.getItems()
						that.closeNewItemWidget()
					} else {
						that.onSaveError()
					}
				}).catch(function(error) {
					that.onSaveError()
				})
			},
			itemSelected: function(selectedItems) {
				if (selectedItems.length > 0) {
					var item = selectedItems[selectedItems.length - 1]
					this.newItem.parentId = item.id
					this.newItem.parentName = item.name
				} else {
					this.newItem.parentId = ''
					this.newItem.parentName = ''
				}
				this.$emit("catalog-selected", selectedItems)
			},
			itemNew: function(currentSelected) {
				this.newItem.showable = true
			},
			getItems: function() {
				var that = this
				axios.get(gl.cms_args.server_url + 'catalog/list').then(function(response) {
					var res = response.data
					if (res.code === gl.cms_args.success) {
						that.items = res.data
					} else {
						that.onQueryError()
					}
				}).catch(function(error) {
					that.onQueryError()
				})
			},
			onSaveError: function() {
				this.alert.message = '保存失败'
				this.alert.dismissCountDown = 3
			},
			onQueryError: function() {
				this.alert.message = '查询目录失败'
				this.alert.dismissCountDown = 3
			},
			alertDismissed: function() {
				this.alert.dismissCountDown = 0
			}
		}
	}
</script>

<style>
</style>
